<template>
  <div class="efficiancylabeldivt" >
    <div class="efficiancylabeldiv" :style="{
      bottom: getscalepxc(0)
    }">
      <div v-if="ifeffic" :style="{fontSize: fSize, color: '#fff', pointerEvents: 'none'}">
        <span>单位:{{unit}}</span>
        <div v-for="item,index in colorarr" style="display: flex;">
          <!-- <span :style="{background: item,width: '10px',height: '10px'}"></span> -->
          <div :style="{background: item,width: fSize,height: fSize}"></div>
          {{colorrange[index]}}
        </div>

      </div>

    </div>
  </div>
</template>
<script>

import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "efficiancylabelzzn",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      unitarr: {
      },
      fSize: '50px',
    };
  },
  computed: {
    fSize(){
      return this.getscalepxc(20)
    },
    // fontSize(){

    // },
    // fontSize(){

    // }
  },
  watch: {
    "$store.state.daping.efficiency.colors": {
      handler: function(n, o) {
        this.loadData();
      }
    }
  },
  mounted() {
    this.fSize = this.getscalepxc(8)
  },
  computed: {
    unit() {
      if (this.$store.state.daping.efficiency.type == "") {
        return "";
      }
      return this.$root.efficiency_data.config_data[this.$store.state.daping.efficiency.type]['unit'];
    },
    colorarr() {
      return this.$store.state.daping.efficiency.colors;
    },
    colorrange() {
      // let ddd = "90+@@80-90@@70-80@@60-70@@50-60@@40-50@@30-40@@20-30@@10-20@@10-"
      // let dddarr = ddd.split("@@")
      // return dddarr
      return this.$store.state.daping.efficiency.colorvalmap;
    },
    ifeffic: function() {
      return this.$store.state.daping.scencetype == 'nengxiao'
    }
  },
  methods: {
    loadData() {}
  }
};
</script>
<style lang='scss' scoped>
.efficiancylabeldivt{
  position: relative;
  height: 100%;
}
.efficiancylabeldiv{
  pointer-events: none;
  position: absolute;
  left: 10px;
}
</style>